// subpackage_volleyball/graphic_details/graphic_details.ts
// 排球图文详情页面逻辑 - 充满活力风格

// 定义页面数据的接口
interface GraphicDetailsData {
  title: string; // 图文标题
  mainImage: string; // 当前显示的主图片
  imageList: string[]; // 图片列表
  currentImageIndex: number; // 当前图片索引
  views: number; // 浏览次数
  publishDate: string; // 发布日期
  category: string; // 内容分类
  description: string; // 描述
  uploaderName: string; // 上传者名称
  keyPoints: string[]; // 教学要点
}

Page<GraphicDetailsData>({
  /**
   * 页面的初始数据
   */
  data: {
    title: '排球基础技巧教学 - 传球动作详解', // 图文标题
    mainImage: '/static/images/volleyball-pass-1.jpg', // 当前显示的主图片
    imageList: [ // 图片列表
      '/static/images/volleyball-pass-1.jpg',
      '/static/images/volleyball-pass-2.jpg',
      '/static/images/volleyball-pass-3.jpg',
      '/static/images/volleyball-pass-4.jpg'
    ],
    currentImageIndex: 0, // 当前图片索引
    views: 2542, // 浏览次数
    publishDate: '2023-10-20', // 发布日期
    category: '基础技巧', // 内容分类
    description: '本图文详细讲解了排球传球的基本动作要领，包括手型、站姿、发力方式等关键技术点。通过本教学内容，初学者能够快速掌握正确的传球技巧，提高传球的准确性和稳定性。', // 描述
    uploaderName: '排球教练张指导', // 上传者名称
    keyPoints: [ // 教学要点
      '保持正确的手型：拇指相对，指尖向上，形成半球形',
      '传球时利用腿部力量和手腕的弹性发力',
      '眼睛始终注视来球方向，提前判断球的落点',
      '传球后要保持跟进动作，准备下一个动作'
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options: Record<string, any>) {
    // 从选项中获取图文ID
    if (options && options.id) {
      // 根据ID加载图文数据
      this.loadGraphicData(String(options.id));
    } else {
      console.error('缺少图文ID参数');
      wx.showToast({
        title: '获取图文信息失败',
        icon: 'none',
        duration: 2000
      });
    }
    // 添加页面加载动画效果
    this.addPageLoadAnimation();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    // 添加页面动态效果
    this.addDynamicEffects();
  },

  /**
   * 加载图文数据
   */
  loadGraphicData: function(graphicId: string) {
    // 验证参数
    if (!graphicId || typeof graphicId !== 'string') {
      console.error('无效的图文ID:', graphicId);
      wx.showToast({
        title: '图文ID无效',
        icon: 'none',
        duration: 2000
      });
      return;
    }

    // 这里可以调用API获取真实的图文数据
    // 为了演示，我们使用模拟数据
    wx.showLoading({
      title: '加载中...',
    });

    // 模拟API请求延迟
    setTimeout(() => {
      try {
        // 实际应用中，这里会根据graphicId从服务器获取数据
        this.setData({
          title: '排球基础技巧教学 - 传球动作详解 ' + graphicId
        });

        wx.hideLoading();
        wx.showToast({
          title: '图文信息加载完成',
          icon: 'success',
          duration: 1500
        });
      } catch (error) {
        console.error('加载图文数据失败:', error);
        wx.hideLoading();
        wx.showToast({
          title: '加载失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    }, 1000);
  },

  /**
   * 处理练习指导事件
   */
  handlePracticeGuide: function() {
    try {
      // 添加按钮点击动画
      this.showButtonAnimation('.practice-button');
      
      wx.navigateTo({
        url: '/subpackage_volleyball/training/training?graphicId=' + (new Date().getTime()),
        fail: (err) => {
          console.error('跳转到练习页面失败:', err);
          wx.showToast({
            title: '跳转到练习页面失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    } catch (error) {
      console.error('处理练习指导事件失败:', error);
      wx.showToast({
        title: '操作失败，请重试',
        icon: 'none',
        duration: 2000
      });
    }
  },

  /**
   * 切换到下一张图片
   */
  nextImage: function() {
    const { currentImageIndex, imageList } = this.data;
    if (currentImageIndex < imageList.length - 1) {
      this.setData({
        currentImageIndex: currentImageIndex + 1,
        mainImage: imageList[currentImageIndex + 1]
      });
      this.showImageTransition();
    }
  },

  /**
   * 切换到上一张图片
   */
  prevImage: function() {
    const { currentImageIndex, imageList } = this.data;
    if (currentImageIndex > 0) {
      this.setData({
        currentImageIndex: currentImageIndex - 1,
        mainImage: imageList[currentImageIndex - 1]
      });
      this.showImageTransition();
    }
  },

  /**
   * 直接切换到指定索引的图片
   */
  switchImage: function(e: WechatMiniprogram.BaseEvent) {
    const index = e.currentTarget.dataset.index as number;
    if (index !== this.data.currentImageIndex) {
      this.setData({
        currentImageIndex: index,
        mainImage: this.data.imageList[index]
      });
      this.showImageTransition();
    }
  },

  /**
   * 预览图片
   */
  previewImage: function() {
    wx.previewImage({
      current: this.data.mainImage,
      urls: this.data.imageList
    });
  },

  /**
   * 显示图片切换过渡动画
   */
  showImageTransition: function() {
    // 可以在这里实现图片切换的过渡动画效果
    wx.vibrateShort({
      type: 'light'
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
    try {
      // 确保分享数据有效
      const shareTitle = this.data.title || '排球教学图文';
      const sharePath = '/subpackage_volleyball/graphic_details/graphic_details?id=' + (new Date().getTime());
      const shareImageUrl = this.data.mainImage || '';

      return {
        title: shareTitle,
        path: sharePath,
        imageUrl: shareImageUrl
      };
    } catch (error) {
      console.error('生成分享信息失败:', error);
      // 返回默认分享信息
      return {
        title: '排球教学图文',
        path: '/subpackage_volleyball/graphic_details/graphic_details?id=' + (new Date().getTime())
      };
    }
  },

  /**
   * 添加页面加载动画
   */
  addPageLoadAnimation: function() {
    try {
      // 创建页面加载动画效果
      wx.showLoading({
        title: '活力加载中...',
        mask: true
      });
      
      // 模拟加载完成
      setTimeout(() => {
        try {
          wx.hideLoading();
        } catch (error) {
          console.error('隐藏加载动画失败:', error);
        }
      }, 1200);
    } catch (error) {
      console.error('添加页面加载动画失败:', error);
    }
  },

  /**
   * 添加动态效果
   */
  addDynamicEffects: function() {
    try {
      // 可以在这里添加更多页面动态效果逻辑
      console.log('添加页面动态效果');
    } catch (error) {
      console.error('添加页面动态效果失败:', error);
    }
  },

  /**
   * 显示按钮点击动画
   */
  showButtonAnimation: function(selector: string) {
    try {
      if (!selector || typeof selector !== 'string') {
        console.error('无效的选择器:', selector);
        return;
      }

      // 创建按钮点击动画
      const query = wx.createSelectorQuery();
      query.select(selector).boundingClientRect();
      query.exec((res) => {
        try {
          if (res && res[0]) {
            // 实际项目中可以使用小程序的动画API创建更复杂的动画
            wx.vibrateShort({
              type: 'medium'
            });
          }
        } catch (error) {
          console.error('执行按钮动画查询回调失败:', error);
        }
      });
    } catch (error) {
      console.error('显示按钮点击动画失败:', error);
    }
  }
});
